<template>
  <div class="gentle-content-wrapper">
    <div class="gentle-content-wrapper-center">
      <div class="gentle-content-wrapper-content">
        <div class="components-input-demo-size">
          <a-form :model="formState">
            <a-row :gutter="16">
              <a-col class="gutter-row" :span="8">
                <a-form-item label="物料类型">
                  <a-input v-model:value="formState.name" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="8">
                <a-form-item label="盘头头纹">
                  <a-input v-model:value="formState.name" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="8">
                <a-form-item label="丝批号">
                  <a-input v-model:value="formState.name" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="8">
                <a-form-item label="盘头组编号">
                  <a-input v-model:value="formState.name" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="8">
                <a-form-item label="盘头个数">
                  <a-input v-model:value="formState.name" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="8">
                <a-form-item label="时间">
                  <a-input v-model:value="formState.name" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="8">
                <a-button type="primary">
                  查询 </a-button>
                <a-button style="margin-left: 8px;">
                  重置
                </a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div style="display: flex; flex-wrap: wrap;height: 70%; overflow-y: auto;">
          <div v-for="(item, index) in growCardLists" :key="item.title" style="width: 25%;padding:6px 6px ; ">
            <a-card :title="item.title" style="width: 100%; ">
              <template #extra>
                {{ item.workshop }}
              </template>
              <p style="font-size: 14px; padding: 0px 0px 18px 0px;">{{ item.name }}</p>
              <p style="font-size: 13px; padding: 0px 0px 6px 0px;">盘头数量：{{ item.bunnumber }}</p>
              <p style="font-size: 13px; padding: 0px 0px 6px 0px;">盘头个数：{{ item.buncount }}</p>
              <p style="font-size: 13px; padding: 0px 0px 6px 0px;">盘头头纹：{{ item.bunhearder }}</p>
              <p style="font-size: 13px; padding: 0px 0px 6px 0px;">平均米数：{{ item.bunnumber }}</p>
              <p style="font-size: 13px; padding: 0px 0px 6px 0px;">丝批号：{{ item.bunnumber }}</p>
              <p style="font-size: 13px; padding: 0px 0px 6px 0px;">生产机台：{{ item.bunnumber }}</p>
              <p style="font-size: 13px; padding: 0px 0px 6px 0px;">编组时间：{{ item.bunnumber }}</p>
            </a-card>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Form } from 'ant-design-vue';
import { reactive, toRaw } from 'vue';
import type { UnwrapRef } from 'vue';
interface GrowCardItem {
  icon?: string;
  workshop?: string,
  name?: string,
  bunnumber?: string,
  buncount?: string,
  bunhearder?: string,
  silknumber?: string,
  production?: string,
  time?: string,
  average?: string,
  title?: string;
  value?: number;
  total?: number;
  color?: string;
  action?: string;
}
const growCardLists: GrowCardItem[] = [
  {
    title: 'zzz1120924',
    name: "5024长袜",
    workshop: '整经车间',
    bunnumber: "6-73",
    buncount: "333",
    bunhearder: '111',
    average: '112',
    silknumber: '111',
    production: "z103",
    time: "2021-12-09 15:43:43"
  },
  {
    title: 'zzz1120924',
    workshop: '整经车间',
    name: "5024长袜",
    bunnumber: "6-73",
    buncount: "333",
    bunhearder: '111',
    average: '112',
    silknumber: '111',
    production: "z103",
    time: "2021-12-09 15:43:43"
  },
  {
    title: 'zzz1120924',
    workshop: '整经车间',
    name: "5024长袜",
    bunnumber: "6-73",
    buncount: "333",
    bunhearder: '111',
    average: '112',
    silknumber: '111',
    production: "z103",
    time: "2021-12-09 15:43:43"
  },
  {
    title: 'zzz1120924',
    workshop: '整经车间',
    name: "5024长袜",
    bunnumber: "6-73",
    buncount: "333",
    bunhearder: '111',
    average: '112',
    silknumber: '111',
    production: "z103",
    time: "2021-12-09 15:43:43"
  }
];
// 搜索数组
interface FormState {
  name: string;
  delivery: boolean;
  type: string[];
  resource: string;
  desc: string;
}
const formState: UnwrapRef<FormState> = reactive({
  name: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
});
</script>
<style lang="less" scoped>
.components-input-demo-size {
  padding: 8px 8px;
  background-color: #FFFFFF;
}

.ant-card-head {
  background-color: red;
}

.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0px 8px 0px 8px;
}
</style>
